<template>
	<view class="beijingse">
		<u-popup :show="show" @close="close" mode="center" :round="15">
			<view class="tkbox">
				<view class="tanktb">
					<image src="../../static/image/system/che.png" mode=""></image>
				</view>
				<view class="neijianju">
					<view class="erwm">
						<image src="../../static/image/system/yue.png" mode=""></image>
					</view>
					<view class="textcenter eshiliu margin_top">扫描二维码查询物流信息</view>
				</view>
			</view>
		</u-popup>
		<header-top :messageInfo="{typeFlag:true,message:'我的订单',liner:false}"></header-top>
		<!-- <view class="flexbetween"> -->
			<u-tabs :list="list1" lineColor="#FD463E" @click="clicktabtow" :activeStyle="{
			    color: ' #333333',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#999999',
				 fontWeight: 'bold',
				transform: 'scale(1)'
			}" itemStyle="width:18%; height: 44px;"></u-tabs>
		<!-- </view> -->
		<!-- 内容 -->
		<view class="kym" v-if="currenttabtow==0&&!listarr[0].list.data.length">
			<image src="../../static/image/system/zwdd.png" mode=""></image>
		</view>
		<view class="kym" v-if="currenttabtow==1&&!listarr[1].list.data.length">
			<image src="../../static/image/system/zwdd.png" mode=""></image>
		</view>
		<view class="kym" v-if="currenttabtow==2&&!listarr[2].list.data.length">
			<image src="../../static/image/system/zwdd.png" mode=""></image>
		</view>
		<view class="kym" v-if="currenttabtow==3&&!listarr[3].list.data.length">
			<image src="../../static/image/system/zwdd.png" mode=""></image>
		</view>
		<view class="block1" v-for="item in listarr[0].list.data" :key="item.id" v-if="currenttabtow==0" @click="tzddxq(item)">
			<view class="ffffff radius mainpadding margin_top">
				<view class="flexbetween xiahuax">
					<view class="strongtext">订单编号：{{item.order_no}}</view>
					<!-- 待付款 -->
					<view class="xiaofentext" v-if="item.pay_status==10 && item.order_status==10">待付款</view>
					<!-- 已取消 -->
					<view class="huisetext" v-if="item.order_status==20">已取消</view>
					<!-- 进行中 -->
					<view class="huangsetext" v-if="item.order_status==30">处理中</view>
					<!-- 已完成 -->
					<view class="lvsetext" v-else-if="item.order_status==40">已完成</view>
					<!-- 取消中 -->
					<view class="huangsetext" v-if="item.order_status==60">取消中</view>
				</view>
				<view class="flexbetween xiahuax margin_top" v-for="ite in item.ordergoods" :key="ite.id">
					<view class="shilitu">
						<image :src="ite.images_text" mode=""></image>
					</view>
					<view class="rtbox">
						<view class="titletext lianghang">{{ite.goods_name}}</view>
						<view class="flexbetween margin_top1">
							<view class="fensetext">¥{{ite.goods_price}}</view>
							<view class="fensetext">x{{ite.total_num}}</view>
						</view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="nostrongtext">共计{{item.goods_num}}件商品 合计</view>
					<view class="fensetext">¥{{item.total_price}}</view>
				</view>
				<view class="flexright margin_top">
					<view class="huisebtn" v-if="item.order_status==20" @click.stop="delorder(item.id)">删除订单</view>
					<view class="huisebtn" v-if="item.order_status==10" @click.stop="qxorder(item.id)">取消订单</view>
					<view class="fensbtn" v-if="item.pay_status==10 && item.order_status==10" @click.stop="orderPay(item.id)">立即支付</view>
					<!-- <view class="fensbtn" @click.stop="tankuang">查看物流</view> -->
					<view class="fensbtn" v-if="item.pay_status==20">查看详情</view>
					<view class="fensbtn" v-if="item.order_status==40"  @click.stop="homepage">再次购买</view>
				</view>
			</view>
		</view>
		
		<view class="block1" v-for="item in listarr[1].list.data" :key="item.id" v-if="currenttabtow==1" @click="tzddxq(item)">
			<view class="ffffff radius mainpadding margin_top">
				<view class="flexbetween xiahuax">
					<view class="strongtext">订单编号：{{item.order_no}}</view>
				<!-- 待付款 -->
				<view class="xiaofentext" v-if="item.pay_status==10 && item.order_status==10">待付款</view>
				<!-- 已取消 -->
				<view class="huisetext" v-if="item.order_status==20">已取消</view>
				<!-- 进行中 -->
				<view class="huangsetext" v-if="item.order_status==30">处理中</view>
				<!-- 已完成 -->
				<view class="lvsetext" v-else-if="item.order_status==40">已完成</view>
				<!-- 取消中 -->
				<view class="huangsetext" v-if="item.order_status==60">取消中</view>
				</view>
				<view class="flexbetween xiahuax margin_top" v-for="ite in item.ordergoods" :key="ite.id">
					<view class="shilitu">
						<image :src="ite.images_text" mode=""></image>
					</view>
					<view class="rtbox">
						<view class="titletext lianghang">{{ite.goods_name}}</view>
						<view class="flexbetween margin_top1">
							<view class="fensetext">¥{{ite.goods_price}}</view>
							<view class="fensetext">x{{ite.total_num}}</view>
						</view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="nostrongtext">共计{{item.goods_num}}件商品 合计</view>
					<view class="fensetext">¥{{item.total_price}}</view>
				</view>
				<view class="flexright margin_top">
					<view class="huisebtn" v-if="item.order_status==20" @click.stop="delorder(item.id)">删除订单</view>
					<view class="huisebtn" v-if="item.order_status==10" @click.stop="qxorder(item.id)">取消订单</view>
					<view class="fensbtn" v-if="item.pay_status==10 && item.order_status==10" @click.stop="orderPay(item.id)">立即支付</view>
					<!-- <view class="fensbtn" @click.stop="tankuang">查看物流</view> -->
					<view class="fensbtn" v-if="item.pay_status==20">查看详情</view>
					<view class="fensbtn" v-if="item.order_status==40"  @click.stop="homepage">再次购买</view>
				</view>
			</view>
		</view>
		<view class="block1" v-for="item in listarr[2].list.data" :key="item.id" v-if="currenttabtow==2" @click="tzddxq(item)">
			<view class="ffffff radius mainpadding margin_top">
				<view class="flexbetween xiahuax">
					<view class="strongtext">订单编号：{{item.order_no}}</view>
					<!-- 待付款 -->
					<view class="xiaofentext" v-if="item.pay_status==10 && item.order_status==10">待付款</view>
					<!-- 已取消 -->
					<view class="huisetext" v-if="item.order_status==20">已取消</view>
					<!-- 进行中 -->
					<view class="huangsetext" v-if="item.order_status==30">处理中</view>
					<!-- 已完成 -->
					<view class="lvsetext" v-else-if="item.order_status==40">已完成</view>
					<!-- 取消中 -->
					<view class="huangsetext" v-if="item.order_status==60">取消中</view>
				</view>
				<view class="flexbetween xiahuax margin_top" v-for="ite in item.ordergoods" :key="ite.id">
					<view class="shilitu">
						<image :src="ite.images_text" mode=""></image>
					</view>
					<view class="rtbox">
						<view class="titletext lianghang">{{ite.goods_name}}</view>
						<view class="flexbetween margin_top1">
							<view class="fensetext">¥{{ite.goods_price}}</view>
							<view class="fensetext">x{{ite.total_num}}</view>
						</view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="nostrongtext">共计{{item.goods_num}}件商品 合计</view>
					<view class="fensetext">¥{{item.total_price}}</view>
				</view>
				<view class="flexright margin_top">
					<view class="huisebtn" v-if="item.order_status==20" @click.stop="delorder(item.id)">删除订单</view>
					<view class="huisebtn" v-if="item.order_status==10" @click.stop="qxorder(item.id)">取消订单</view>
					<view class="fensbtn" v-if="item.pay_status==10 && item.order_status==10" @click.stop="orderPay(item.id)">立即支付</view>
					<!-- <view class="fensbtn" @click.stop="tankuang">查看物流</view> -->
					<view class="fensbtn" v-if="item.pay_status==20">查看详情</view>
					<view class="fensbtn" v-if="item.order_status==40"  @click.stop="homepage">再次购买</view>
				</view>
			</view>
		</view>
		<view class="block1" v-for="item in listarr[3].list.data" :key="item.id" v-if="currenttabtow==3" @click="tzddxq(item)">
			<view class="ffffff radius mainpadding margin_top">
				<view class="flexbetween xiahuax">
					<view class="strongtext">订单编号：{{item.order_no}}</view>
					<!-- 待付款 -->
					<view class="xiaofentext" v-if="item.pay_status==10 && item.order_status==10">待付款</view>
					<!-- 已取消 -->
					<view class="huisetext" v-if="item.order_status==20">已取消</view>
					<!-- 进行中 -->
					<view class="huangsetext" v-if="item.order_status==30">处理中</view>
					<!-- 已完成 -->
					<view class="lvsetext" v-else-if="item.order_status==40">已完成</view>
					<!-- 取消中 -->
					<view class="huangsetext" v-if="item.order_status==60">取消中</view>
				</view>
				<view class="flexbetween xiahuax margin_top" v-for="ite in item.ordergoods" :key="ite.id">
					<view class="shilitu">
						<image :src="ite.images_text" mode=""></image>
					</view>
					<view class="rtbox">
						<view class="titletext lianghang">{{ite.goods_name}}</view>
						<view class="flexbetween margin_top1">
							<view class="fensetext">¥{{ite.goods_price}}</view>
							<view class="fensetext">x{{ite.total_num}}</view>
						</view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="nostrongtext">共计{{item.goods_num}}件商品 合计</view>
					<view class="fensetext">¥{{item.total_price}}</view>
				</view>
				<view class="flexright margin_top">
					<view class="huisebtn" v-if="item.order_status==20" @click.stop="delorder(item.id)">删除订单</view>
					<view class="huisebtn" v-if="item.order_status==10" @click.stop="qxorder(item.id)">取消订单</view>
					<view class="fensbtn" v-if="item.pay_status==10 && item.order_status==10" @click.stop="orderPay(item.id)">立即支付</view>
					<!-- <view class="fensbtn" @click.stop="tankuang">查看物流</view> -->
					<view class="fensbtn" v-if="item.pay_status==20">查看详情</view>
					<view class="fensbtn" v-if="item.order_status==40"  @click.stop="homepage">再次购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				currenttabtow: 0,
				list1: [{
						name: '全部',
					},{
						name: '待付款',
					},{
						name: '开卡中',
					},{
						name: '已完成',
					}
				],
				listarr:[
					{
						page:1,
						list:{
							data:[]
						}
					},
					{
						page:1,
						list:{
							data:[]
						}
					},
					{
						page:1,
						list:{
							data:[]
						}
					},
					{
						page:1,
						list:{
							data:[]
						}
					}
				],
				limit:8,
			}
		},
		onShow() {
			// let arr = [1,1,1,1]
			// arr.forEach((item,index)=>{
			// 	this.listarr.push({
					
			// 	})
			// })
			this.apiall()
		},
		methods: {
			apiall(){
				let arr = [1,1,1,1]
				arr.forEach((item,index)=>{
					this.getdata(false,false,index)
				})
			},
			//删除订单
			delorder(id){
				let _this = this;
				httpRequest.modal('提示','确认删除当前订单吗？', true, (res) => {
					if(res){
						httpRequest.request('api/order/cancelOrder','POST',{
							order_id:id,
						}).then(res => {
							httpRequest.toast(res.msg);
							if(res.code==1){
								this.apiall()
							}
						})
					}
				})
				
			},
			homepage(){
				uni.reLaunch({
					url:"/pages/homepage/homepage"
				})
			},
			orderPay(id) {
				uni.showLoading({
					title: '请稍候...',
					mask:true
				})
				httpRequest.request('api/order/orderPay', 'POST', {
					order_id: id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let pay = res.data.wxconfig
						uni.hideLoading()
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: pay.timeStamp,
							nonceStr: pay.nonceStr,
							package: pay.package,
							signType: pay.signType,
							paySign: pay.paySign,
							success: function(res) {
								// 支付成功
								this.getdata(false,false,this.currenttabtow)
							},
							fail: function(err) {
								// 支付失败
							}
						});
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			//取消订单
			qxorder(id){
				let _this = this;
				httpRequest.modal('提示','是否确认取消订单？', true, (res) => {
					if(res){
						httpRequest.request('api/order/removeOrder','POST',{
							order_id:id,
						}).then(res => {
							httpRequest.toast(res.msg);
							if(res.code==1){
								this.apiall()
							}
						})
					}
				})
				
			},
			getdata(isPage,page,index){
				let _this = this;
				httpRequest.request('api/order/myOrders','POST',{
					page:page||1,
					limit:_this.limit,
					status:index,
				}).then(res => {
					uni.hideLoading()
					if(res.code == 1){
						let resList = res.data.data;
						if (isPage == true) {
							_this.listarr[index].list.data.push(...resList);
						} else {
							_this.listarr[index].list = res.data
							_this.listarr[index].list.data = resList;
						}
						console.log(_this.listarr,"数据汇总")
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.listarr[this.currenttabtow];
				let page = _this.listarr[this.currenttabtow].page;
				if (list.total <= page) {
					return false;
				}
				page++;
				_this.listarr[this.currenttabtow].page = page;
				_this.getdata(true, page,this.currenttabtow);
			},
			// 弹框接口
			tankuang() {
				this.show = true
			},
			close() {
				this.show = false
			},
			tzddxq(item) {
				let data = {
					type:item.order_status,
					order_id:item.id
				}
				uni.navigateTo({
					url: '/pages/mypage/dingdanxq?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			clicktabtow(e) {
				console.log(e);
				this.status = e.index;
				this.currenttabtow = e.index;
				console.log(this.listarr[this.currenttabtow].list,"list数据")
				console.log(this.currenttabtow,"下标")
				this.getdata();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.kym{
		margin:250rpx auto 0;
		width: 343rpx;
		height: 324rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.erwm {
		width: 243rpx;
		height: 243rpx;
		margin: 30rpx auto 0;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.eshiliu {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	.neijianju {
		padding: 0 130rpx;
	}
	.tkbox {
		padding-bottom: 60rpx;
	}
	
	.tanktb {
		width: 100%;
		height: 237rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.lvsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #28C445;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF8110;
	}

	.xiaofentext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.fensbtn {
		margin-left: 30rpx;
		border-radius: 120rpx;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		border: 1rpx solid #FD463E;
	}

	.huisebtn {
		margin-left: 30rpx;
		border-radius: 120rpx;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 1rpx solid #666666;
	}

	.fensetext {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.lianghang {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}

	.rtbox {
		width: 74%;
	}

	.shilitu {
		width: 22%;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
	}
</style>
